<template>
  <div :class="[ww%2 != '1' ?'classa':'classb']"  >
  
    <div id="app" :class="{ height: show, shrot: !show }">
      <router-view v-if="isRouterAlive" :key="$route.path + $route.query.t"></router-view>
      <MusicPlayIndex />
   <!-- <div> <input  type="text" v-model="ww"/></div>   -->
     
    </div>
  </div>
</template>
<script>
import { Dialog } from "vant";
// import { INCRECOUNT } from "./store/mutation-types";
import { mapState,mapMutations } from "vuex";
import MusicPlayIndex from "./components/player/index.vue";
export default {
  name: "MusicApp",
  components: { MusicPlayIndex },
  data() {
    return { isRouterAlive: true,
   ww:this.$store.state.count,
      
  };
  },
  
  mounted() {
    this.startupScreen();
    
  },
  computed: {
    autofn () {
		return this.$store.state.count
	},
    ...mapState({
      show: (state) => state.Highly,
    }),
  },
  provide () {    //父组件中通过provide来提供变量，在子组件中通过inject来注入变量。                                             
            return {
                reload: this.reload                                              
            }
        },
watch: {
autofn () {
		this.ww = this.$store.state.count
	}
},
  methods: {
  
  
     reload () {
                this.isRouterAlive = false;            //先关闭，
                this.$nextTick(function () {
                    this.isRouterAlive = true;         //再打开
                }) 
     },
     ...mapMutations(['SET_MYSHOW','SETUNMYSHOW']),
    startupScreen() {
      console.log("每一个星球都有一个驱动核心，\n每一种思想都有影响力的种子。\n感受世界的温度，\n年轻的你也能成为改变世界的动力，\n珍惜你所有的潜力。\n你的潜力，是改变世界的动力！");
      if (this.$getViewportSize().width >= 600) {
        Dialog.confirm({
          title: "提示",
          message: "检测屏幕宽度 “过大” , 推荐使用移动设备",
        })
            .then(() => {  
 this.SET_MYSHOW()

          })
          .catch(() => {
            this.SET_UNMYSHOW()
           
          });
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import url("./static/index.css");
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
 
}
.classb{ background:#282c34; opacity: .9;}
.classa{display: block;}

.height {
  padding-bottom: 6.25rem;
}
.shrot {
  padding-bottom: 3.125rem;
}
</style>